<script lang="ts" setup>
import { ref } from 'vue';
import RelationChain from './components/relation-chain.vue';

const list = ref<any>([{
    isEmployee: true,
    invitedBy: '张少宁',
    createdAt: '2023-01-01 20:11:33',
    photo: '13800138000',
    teamName: "刘艺成的团",
    teamIdentity: "团长",
    teamMemberCount: 11,
    applicant: {
        realName: "刘艺成",
        phone: "13512345678"
    },
    nickName: "梁春飞",
    paymentAmount: '50元',
    receivedAmount: '49.65元',
    teamStatus: '待成团',
    orderStatus: '待核销'
}, {
    createdAt: '2023-01-01 20:11:33',
    photo: '13800138000',
    teamName: "刘艺成的团",
    teamIdentity: "团员",
    teamMemberCount: 11,
    applicant: {
        realName: "刘二妹",
        phone: "13512345678"
    },
    nickName: "梁春飞",
    paymentAmount: '50元',
    receivedAmount: '49.65元',
    teamStatus: '已成团',
    orderStatus: '已核销'
}, {
    createdAt: '2023-01-01 20:11:33',
    photo: '13800138000',
    teamName: "肖云珊的团",
    teamIdentity: "团长",
    teamMemberCount: 11,
    applicant: {
        realName: "肖云珊",
        phone: "15912345678"
    },
    nickName: "双木",
    paymentAmount: '50元',
    receivedAmount: '49.65元',
    teamStatus: '已成团',
    orderStatus: '已核销'
}])

const teamList = ref<any>([
    {
        count: 5
    },
    {
        count: 5
    }
])

const transferModalVisible = ref(false)
const relationChainVisible = ref(false)
</script>
<template>
    <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
        <umrp-breadcrumb :items="['活动管理', '活动列表', '报名表']"></umrp-breadcrumb>
        <umrp-card>
            <umrp-grid :cols="4" :row-gap="10" :col-gap="10">
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>已报名人数</div>
                                <umrp-tooltip content="已经报名并支付成功的人数总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>总支付金额</div>
                                <umrp-tooltip content="当前活动报名支付金额的总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>退款人数</div>
                                <umrp-tooltip content="当前活动退款人数的总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>退款金额(元)</div>
                                <umrp-tooltip content="当前活动退款金额的总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>实收金额(元)</div>
                                <umrp-tooltip content="当前活动总收款扣除佣金后的剩余总额">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>开团数</div>
                                <umrp-tooltip content="用户选择开团且报名支付成功的总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="999">
                        <template #extra>
                            <umrp-space align="center" :size="4">
                                <div>成团数</div>
                                <umrp-tooltip content="当前活动中达成最低成团人数的总和">
                                    <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                                </umrp-tooltip>
                            </umrp-space>
                        </template>
                    </umrp-statistic>
                </umrp-grid-item>
            </umrp-grid>
        </umrp-card>
        <umrp-card>
            <umrp-table :data="list">
                <template #columns>
                    <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                    <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
                    <umrp-table-column title="报名信息" slot-name="applicant"></umrp-table-column>
                    <umrp-table-column title="邀请人" slot-name="invitedBy"></umrp-table-column>
                    <umrp-table-column title="团内身份" data-index="teamIdentity"></umrp-table-column>
                    <umrp-table-column title="团人数" data-index="teamMemberCount"></umrp-table-column>
                    <umrp-table-column title="所属团" data-index="teamName"></umrp-table-column>
                    <umrp-table-column title="支付金额" data-index="paymentAmount"></umrp-table-column>
                    <umrp-table-column title="实收金额" data-index="receivedAmount"></umrp-table-column>
                    <umrp-table-column title="报名时间" data-index="createdAt"></umrp-table-column>
                    <umrp-table-column title="待成团" data-index="teamStatus"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action" :width="160"></umrp-table-column>
                </template>
                <template #invitedBy="{ record }">
                    <umrp-space direction="vertical" :size="6">
                        <umrp-text v-if="record.isEmployee" color="#1890ff" bold>{{ record.invitedBy }}</umrp-text>
                        <umrp-text v-else="record.isEmployee">高州百悦艺术张老师</umrp-text>
                        <umrp-text>13512345678</umrp-text>
                        <umrp-text>ID:125709154</umrp-text>
                    </umrp-space>
                </template>
                <template #applicant="{ record }">
                    <umrp-space direction="vertical" :size="10">
                        <umrp-text>{{ record.applicant.realName }}</umrp-text>
                        <umrp-text>{{ record.applicant.phone }}</umrp-text>
                    </umrp-space>
                </template>
                <template #action="{ record }">
                    <umrp-container direction="vertical" :gap="10">
                        <umrp-space :size="10">
                            <umrp-button type="primary">开团</umrp-button>
                            <umrp-button type="primary" v-if="record.teamIdentity === '团长'">降为团员</umrp-button>
                            <umrp-button type="primary" v-else="">升为团长</umrp-button>
                        </umrp-space>
                        <umrp-space :size="10">
                            <umrp-button type="primary" @click="transferModalVisible = true">转团</umrp-button>
                            <umrp-button type="primary" @click="relationChainVisible = true">客户来源</umrp-button>
                        </umrp-space>
                    </umrp-container>
                </template>
                <template #wxinfo="{ nickName, userId }">
                    <umrp-user-info :nick-name="nickName" :user-id="userId">
                    </umrp-user-info>
                </template>
            </umrp-table>
        </umrp-card>
        <umrp-modal :visible="transferModalVisible" :width="500" :footer="false">
            <umrp-container direction="vertical" :gap="10">
                <umrp-input-search></umrp-input-search>
                <umrp-table :data="teamList">
                    <template #columns>
                        <umrp-table-column title="团长" slot-name="teamer"></umrp-table-column>
                        <umrp-table-column title="团人数" data-index="count" width="100"></umrp-table-column>
                        <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
                    </template>
                    <template #teamer="{ record }">
                        <umrp-user-info :nick-name="record.nickName" :user-id="record.userId">
                        </umrp-user-info>
                    </template>
                    <template #action>
                        <umrp-space :size="10">
                            <umrp-button type="primary" @click="transferModalVisible = false">选择</umrp-button>
                        </umrp-space>
                    </template>
                </umrp-table>
            </umrp-container>
        </umrp-modal>
        <umrp-modal width="800px" v-model:visible="relationChainVisible">
            <relation-chain></relation-chain>
        </umrp-modal>
    </umrp-container>
</template>